<template>
  <el-form ref="hkLogisticsForm" :model="form" :inline="true" :rules="formRules" label-width="120px" label-position="right">
    <el-divider content-position="left">
      香港物流
      <el-popover title="交货要求" trigger="hover">
        <i slot="reference" class="el-icon-question" />
        <div slot>
          1、报订单号<br>
          2、随货附装箱单，发票各一式三份<br>
          3、快递交货提前提供快递单号<br>
          4、货物标签需体现型号、 数量、品牌、产地且标签面对外，不接受手写标签<br>
          5、来货超出1卡板，请提前致电12345678预约
        </div>
      </el-popover>
    </el-divider>
    <!--到货类型 及 提货类型-->
    <el-row>
      <el-form-item label="到货类型:" prop="arrivalType">
        <el-radio-group v-model="form.arrivalType">
          <el-radio :label="1">供应商送货</el-radio>
          <el-radio :label="2">华富洋提货</el-radio>
          <el-radio :label="3">快递到货</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.arrivalType === 2" label="提货类型:" prop="pickType">
        <el-radio-group v-model="form.pickType">
          <el-radio :label="1">单个提货点</el-radio>
          <el-radio :label="2">多个提货点</el-radio>
        </el-radio-group>
        <!--多点提货 提货提示-->
        <div v-if="form.pickType === 2" class="tip-message">多个提货点提货时请在订单保存后至 提货安排 中新增</div>
      </el-form-item>
    </el-row>

    <!--华富洋提货 单个提货点-->
    <div v-if="form.arrivalType === 2 && form.pickType === 1">

      <!--提货单号 件数-->
      <el-row>
        <el-form-item label="提货单号:" prop="pickNo">
          <el-input v-model.trim="form.pickNo" clearable />
        </el-form-item>
        <el-form-item label="提货件数:" class="pick-numbers-form-item">
          <el-input v-model="form.totalPallet">
            <template slot="append">板</template>
          </el-input>
          <el-input v-model="form.totalPackage">
            <template slot="append">箱</template>
          </el-input>
        </el-form-item>
      </el-row>

      <!--提货地址-->
      <el-row>
        <el-form-item label="提货地址:" prop="pickAddress">
          <el-select v-model.trim="form.pickAddress" value-key="id" filterable clearable remote :remote-method="getPickAddressList" :loading="pickAddressLoading" :disabled="!supplierId" popper-class="common-select-popper">
            <el-option v-for="item in pickAddressList" :key="item.id" :label="item.address" :value="item" class="common-select-option">
              <div class="select-title">{{ item.address }}</div>
              <span class="select-other">
                {{ item.name }}
                <el-divider direction="vertical" />
                {{ item.tel }}
                <el-divider direction="vertical" />
                {{ item.phone }}
              </span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系人及电话:">
          <el-input :value="buildPickAddressInfo()" readonly />
        </el-form-item>
      </el-row>

      <!--提货时间 附件-->
      <el-row>
        <el-form-item label="提货时间:" prop="pickTime">
          <el-date-picker v-model="form.pickTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" />
        </el-form-item>
        <el-form-item label="提货附件:">
          <FileUpload ref="pickFile" :file-tag="2" :max-size="5 * 1024 * 1024" accept="doc,jpg,png" />
        </el-form-item>
      </el-row>
    </div>

    <!--快递到货-->
    <el-row v-if="form.arrivalType === 3">
      <el-form-item label="运营商:" prop="overseasExpress">
        <el-select v-model.trim="form.overseasExpress" filterable clearable allow-create>
          <el-option v-for="item in $store.getters.dictSelectData.escm_overseas_expresss_company" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
        <div class="tip-message">可手动录入其他运营商</div>
      </el-form-item>
      <el-form-item label="快递单号:" prop="expressNo">
        <el-input v-model.trim="form.overseasExpressNo" />
        <div class="tip-message">多个快递单号时请用 / 分隔</div>
      </el-form-item>
    </el-row>

  </el-form>
</template>

<script>
import { pickAddressList } from '@/api/hfy/escm'
import FileUpload from '@/components/FileUpload'
import { getDictSelectData, strJoin } from '@/utils/common'
import { newValidator } from '@/utils/validate'
export default {
  name: 'HKLogistics',
  components: { FileUpload },
  props: {
    supplierId: {
      type: [String, Number],
      default: ''
    },
    form: {
      type: Object,
      required: true
    }
  },
  data() {
    // 华富洋提货 提货类型必选
    const pickTypeValidator = newValidator(() => {
      if (this.form.arrivalType !== 2) {
        return true
      } else {
        if (this.form.pickType) {
          return true
        }
        return false
      }
    }, '提货类型必选')
    // 华富洋提货 单个提货点 提货地址必选
    const pickAddressValidator = newValidator(() => {
      if (this.form.arrivalType === 2 && this.form.pickType === 1) {
        if (this.form.pickAddress && this.form.pickAddress.id) {
          return true
        }
        return false
      }
      return true
    }, '提货地址必选')
    // 华富洋提货 单个提货点 提货时间必填
    const pickTimeValidator = newValidator(() => {
      if (this.form.arrivalType === 2 && this.form.pickType === 1) {
        if (this.form.pickTime) {
          return true
        }
        return false
      }
      return true
    }, '提货时间必填')
    return {
      // 提货地址
      pickAddressList: [], pickAddressLoading: false,
      formRules: {
        arrivalType: [{ required: true, message: '到货类型必选', trigger: 'change' }],
        pickType: [{ required: true, validator: pickTypeValidator, trigger: 'change' }],
        pickAddress: [{ required: true, validator: pickAddressValidator, trigger: 'change' }],
        pickTime: [{ required: true, validator: pickTimeValidator, trigger: 'change' }]
      }
    }
  },
  watch: {
    supplierId: {
      immediate: true,
      handler(value) {
        console.log('供应商ID变化, 清空提货地址', value)
        this.form.pickAddress = ''
        this.getPickAddressList()
      }
    }
  },
  created() {
    // 境外快递运营商
    getDictSelectData('escm_overseas_expresss_company')
  },
  methods: {
    // 提货地址
    getPickAddressList(query) {
      if (this.supplierId) {
        this.pickAddressLoading = true
        setTimeout(() => {
          pickAddressList({ keyword: query, page: 1, size: 10, supplierId: this.supplierId }).then(res => {
            this.pickAddressList = res
            this.pickAddressLoading = false
          }).catch(() => { this.pickAddressLoading = false })
        }, 200)
      }
    },
    // 构建提货联系人及电话
    buildPickAddressInfo() {
      const pickAddress = this.form.pickAddress
      if (pickAddress) {
        return strJoin(' ', [pickAddress.name, pickAddress.tel, pickAddress.phone])
      }
    },
    self() {
      return this.$refs.hkLogisticsForm
    }
  }
}
</script>
